<template>
	<view class="servicedetaile">
		<view class="sertopimg">
			<view class="ser_shoadow"></view>
		</view>
		<!-- <view class="servicedetaile_top">可申请<view class="servicedetaile_top_number">{{detailedata.joinNum}}</view>次 -->
		<!-- </view> -->
		<view class="ser_detaile_box">
			<view class="ser_detale_title">{{detailedata.title}}</view>
			<view class="ser_detale_position">
				<image src="../../../static/images/icon_org_locate.png" mode=""></image>
				<view class="ser_detale_positiontext">{{detailedata.sysOrgName}}</view>
			</view>
			<view class="ser_detale_position">
				<image src="../../../static/images/icon_rec_timeline.png" mode=""></image>
				<view class="ser_detale_positiontext">{{detailedata.startTime}} — {{detailedata.endTime}}</view>
			</view>
			<view class="servicedetaile_line"></view>
			<view class="servicedetaile_textbox">
				<view class="textbox_left">
					服务类型：
				</view>
				<view class="textbox_right">
					{{typetext}}
				</view>
			</view>
			<view class="servicedetaile_textbox">
				<view class="textbox_left">
					服务提供组织：
				</view>
				<view class="textbox_right">
					{{detailedata.orgName}}
				</view>
			</view>
			<view class="servicedetaile_line"></view>
			<view class="servicedetaile_textboxs">{{detailedata.content}}</view>
		</view>
		<view class="service_bottom">
			<button type="default" @click="close">取消申请</button>
		</view>
	</view>
</template>

<script module="tools" lang="wxs" src="../../../utils/tools.wxs"></script>

<script>
	import {
		servicedetaile,
		closeService,
		gettypelist
	} from '@/api/service.js';
	var t = require("../../../utils/request.js"),
		config = require("../../../utils/config.js").config,
		e = function(t) {
			return t && t.__esModule ? t : {
				default: t
			};
		}(require("../../../utils/api.js")),
		a = require("../../../utils/util.js"),
		app = getApp()

	export default {
		data() {
			return {
				comment:'',
				linkUser: '',
				phone: '',
				address: '',
				serviceTime: '',
				array: ['上午', '下午', '晚上'],
				// 123
				index: 0,
				date: '',
				time: '',
				inputValue: '',
				dialogList: [],
				id: "",
				detailObj: null,
				isSignUp: false,
				signType: 2,
				cannotSign: !1,
				btnDisabled: !1,
				detailedata: {},
				typelist: [],
				typetext: ''
			};
		},
		computed: {},
		components: {},
		props: {},
		onLoad: function(t) {
			this.id=t.id
			if(this.id){
				this.getRecruitDetail()
			}
			
		},
		methods: {
			//下拉框
			bindPickerChange: function(e) { //改变的事件名
				//console.log('picker发送选择改变，携带值为', e.target.value)   用于输出改变索引值
				this.index = e.target.value //将array【改变索引】的值赋给定义的jg变量
			},
			close() {
				let data={
					'addId':this.id,
					'volunteerId':app.globalData.zyzId,
				}
				closeService(data).then((ret) => {
					if (ret.success) {
						uni.showToast({
							title: "已取消",
							icon: "success",
							duration: 2000
						})
						setTimeout(function() {
							uni.navigateTo({
								url: "/pages/me/service/service",
					
							});
						}, 2000);
					} else {
						uni.showToast({
							title: ret.message,
							icon: "none",
							duration: 2000
						})
					}
				})
			},

			gettypelist: function() {
				gettypelist().then((ret) => {
					this.typelist = ret.data
					for (let i in this.typelist) {
						if (this.typelist[i].code == this.detailedata.serviceType) {
							this.typetext = this.typelist[i].value
						}
					}
				})

			},
			getRecruitDetail: function() {
				servicedetaile({
					id: this.id
				}).then((ret) => {
					if(ret.success){
						this.detailedata = ret.data
						this.detailedata.startTime = this.detailedata.startTime.substring(0, 10);
						this.detailedata.endTime = this.detailedata.endTime.substring(0, 10);
						this.gettypelist()
					}
				})

			},
		}
	};
</script>
<style>
	.servicedetaile {
		position: relative;
	}

	.sertopimg {
		position: relative;
		width: 100%;
		height: 500rpx;
		/*background-image: url(../../static/images/3.jpg); */
		background: url(../../../static/images/3.jpg) no-repeat 50%;
		background-size: 100% 100%;
	}

	.ser_shoadow {
		position: absolute;
		content: "";
		display: block;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1.333333rem;
		background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff);
	}

	.ser_detaile_box {
		position: relative;
		z-index: 3;
		width: 92%;
		height: auto;
		margin: 0 auto;
		margin-top: -360rpx;
		background: #FFF;
		border-radius: .266667rem;
		box-shadow: 0 1rpx 10rpx #939393;
		padding: 1rem;
	}

	.ser_detale_position {
		margin-bottom: 30rpx;
	}

	.ser_detale_position image {
		width: 25rpx;
		height: 25rpx;
	}

	.ser_detale_positiontext {
		margin-left: 20rpx;
		display: inline;
		font-size: 24rpx;
		line-height: 50rpx;
		color: #333333;
	}

	.ser_detale_title {
		font-size: 36rpx;
		margin-bottom: 30rpx;
	}

	.servicedetaile_top {
		position: absolute;
		top: 1.333333rem;
		right: .866667rem;
		z-index: 3;
		display: inline-block;
		height: 1.5rem;
		line-height: 1.5rem;
		padding: 0 .266667rem;
		background: hsla(0, 0%, 100%, .9);
		border-radius: .6rem;
		font-size: .32rem;
		color: #333;
	}

	.servicedetaile_top_number {
		display: inline;
		color: #E60012;
		padding: 0 5rpx;
		/* font-weight: 700; */
	}

	.servicedetaile_line {
		width: 100%;
		height: 2rpx;
		background: #e1e2e3;
		margin: 1.5rem 0 .8rem;
	}

	.servicedetaile_textbox {
		margin-bottom: 30rpx;
	}

	.servicedetaile_textboxs {
		font-size: 28rpx;
		margin-bottom: 30rpx;
	}

	.servicedetaile_textbox .textbox_left {
		display: inline-block;
		width: 5.293333rem;
		white-space: nowrap;
		font-size: .32rem;
		color: #999;
	}

	.servicedetaile_textbox .textbox_right {
		display: inline-block;
		/* width: 4.293333rem; */
		white-space: nowrap;
		font-size: .32rem;
		color: #333333;
	}

	.service_bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 4;
		width: 100%;
		height: 3rem;
		background: #fff;
		box-shadow: 0 1rpx 20rpx #d5d5d5;
		padding: .533333rem .866667rem;
	}

	.service_bottom button {
		width: 100%;
		height: 2.066667rem;
		background: #f6685a;
		font-size: .426667rem;
		color: #fff;
		border: none;
		border-radius: .533333rem;
	}

	.popup_box {
		width: 100%;

		height: auto;
		background-color: #FFFF;
		border-radius: 15rpx 15rpx;
		padding: 30rpx 30rpx;
	}

	.line_box {
		position: relative;
		margin: 20rpx 0rpx;
	}

	.popup-lable {
		position: absolute;
		top: 10rpx;
		left: ;
		font-size: 28rpx;
		display: inline-block;
		width: 230rpx;
		line-height: 50rpx;

	}

	.popup-input {
		margin-left: 250rpx;
		font-size: 28rpx;
		display: inline-block;
		width: 420rpx;
		padding-left: 30rpx;
		line-height: 60rpx;
		min-height: 60rpx;
		max-height: 60rpx;
		border: 1rpx solid #e1e2e3;
	}

	uni-button:after {
		content: " ";
		width: 200%;
		height: 200%;
		position: absolute;
		top: 0;
		left: 0;
		border: none;
		-webkit-transform: scale(.5);
		transform: scale(.5);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		box-sizing: border-box;
		border-radius: 10px;
	}

	.popup_bottom {

		width: 100%;
		height: 2.066667rem;
		background: #f6685a;
		font-size: .426667rem;
		color: #fff;
		border: none;
		border-radius: 1rem;
		margin-top: 3rem;

	}

	.popup_bottoms {
		width: 100%;
		height: 2.066667rem;
		background: transparent;
		font-size: .373333rem;
		color: #999;
		border: none;
		border-radius: 1rem;
		margin-top: 1rem;

	}

	.no_dialog {
		width: 100%;
		height: 100rpx;
		background: #f4f4f4;
		line-height: 100rpx;
		text-align: center;
		font-size: 24rpx;
		color: #b4b4b4;

	}
</style>
